import { Input, Select } from "antd";
import React, { useState } from "react";

const { Option } = Select;

// 省份和城市数据
const provinceData = [
  {
    key: "广东省",
    label: "广东省",
    children: [
      {
        key: "深圳市",
        label: "深圳市",
      },
      {
        key: "广州市",
        label: "广州市",
      },
      {
        key: "东莞市",
        label: "东莞市",
      },
      {
        key: "佛山市",
        label: "佛山市",
      },
    ],
  },
  {
    key: "浙江省",
    label: "浙江省",
    children: [
      {
        key: "杭州市",
        label: "杭州市",
      },
      {
        key: "宁波市",
        label: "宁波市",
      },
      {
        key: "温州市",
        label: "温州市",
      },
      {
        key: "绍兴市",
        label: "绍兴市",
      },
    ],
  },
  {
    key: "江苏省",
    label: "江苏省",
    children: [
      {
        key: "南京市",
        label: "南京市",
      },
      {
        key: "苏州市",
        label: "苏州市",
      },
      {
        key: "无锡市",
        label: "无锡市",
      },
      {
        key: "常州市",
        label: "常州市",
      },
    ],
  },
];

const CascadingSelect = () => {
  const [cities, setCities] = useState<{ key: string; label: string }[]>([]);
  const [selectedProvince, setSelectedProvince] = useState("");
  const { Search } = Input;
  const onSearch = () => {};

  // 处理省份选择变化
  const handleProvinceChange = (value: React.SetStateAction<string>) => {
    setSelectedProvince(value);
    const cityData = provinceData.find((province) => province.key === value);
    setCities(cityData?.children || []);
  };

  // 处理城市选择变化
  const handleCityChange = (value: any) => {
    console.log(`Selected city: ${value}`);
  };

  return (
    <div style={{ float: "left" }}>
      <span>所属城市</span>
      <Select
        style={{ minWidth: "150px", marginLeft: "10px" }}
        placeholder="请选择省份"
        onChange={handleProvinceChange}
        value={selectedProvince}
      >
        {provinceData.map((province) => (
          <Option key={province.key} value={province.key}>
            {province.label}
          </Option>
        ))}
      </Select>
      <Select
        style={{ minWidth: "150px", marginLeft: "10px" }}
        placeholder="请选择城市"
        onChange={handleCityChange}
        value={cities.length ? undefined : ""}
      >
        {cities.map((city) => (
          <Option key={city.key} value={city.key}>
            {city.label}
          </Option>
        ))}
      </Select>
      <Search
        className="input"
        placeholder="请输入搜索内容"
        onSearch={onSearch}
        enterButton="搜索"
      />
    </div>
  );
};

export default CascadingSelect;
